<template>
  <div class="filter-content">
    <el-form ref="form" :model="form" style="width:100%">
      <el-row :gutter="20" type="flex">
        <el-col v-for="item in filterForm" :key="item.key" :span="item.type !== 'daterange' ? 6 : 8">
          <template v-if="item.type === 'text'">
            <el-input v-model="form[item.key]" :placeholder="item.placeholder || '请输入内容'">
              <template slot="prepend">{{ item.title }}</template>
            </el-input>
          </template>
          <template v-if="item.type === 'daterange'">
            <div class="mytime">
              <div class="el-input-group__prepend myprepend">{{ item.title }}</div>
              <el-date-picker
                v-model="form[item.key]"
                type="daterange"
                range-separator="至"
                start-placeholder="开课时间"
                end-placeholder="结课时间"
                @change="getTime"
              >
                <template slot="text">111</template>
              </el-date-picker>
            </div>
          </template>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-search" @click="getForm">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    filterForm: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      input1: '',
      form: {},
      time: ''
    }
  },
  methods: {
    getForm() {
      this.$emit('getForm', this.form)
    },
    getTime() {
      this.$emit('getTime', this.time)
    }
  }
}
</script>

<style lang="scss" scoped>
.filter-content{
  display: flex;
  align-items: center;
  min-height: 80px;
  background: #fff;
  margin: 30px 80px;
  border-radius: 8px;
  border: 1px solid #e7e7e7;
  padding: 0 10px;
  box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
}
::v-deep .el-row--flex{
  flex-wrap: wrap;
}
::v-deep .el-col{
  padding: 10px 0;
}
.mytime{
  display: flex;
}
::v-deep .el-input-group__prepend{
  padding: 0 10px;
}
::v-deep .el-input__inner{
  height: 32px;
}
::v-deep .el-button{
  padding: 8px 10px;
}
::v-deep .el-icon-date, ::v-deep .el-range-separator{
  line-height: 24px;
}
.myprepend{
  width: 98px;
  line-height: 32px;
  font-size: 14px;
  height: 32px;
}
</style>
